<template>
    <div>
        <div class="button-container">
            <a-button @click="addState" type="primary">添加状态</a-button>
        </div>

        <ul class="state-container">
            <li
                v-for="(state, index) in defaultState"
                :key="state.name"
                class="component-item"
            >
                <a-input v-model:value="state.name" placeholder="状态名称" />
                <a-select
                    default-value="lucy"
                    style="width: 100%"
                    @change="handleChange"
                    v-model:value="state.dataType"
                    :options="allDataType"
                >
                </a-select>
                <a-input
                    v-model:value="state.defaultValue"
                    placeholder="默认值"
                />
                <a-input
                    v-model:value="state.describtion"
                    placeholder="状态描述"
                />
                <i
                    class="iconfont icon-ashbin close-button"
                    @click="delState(index)"
                ></i>
            </li>
        </ul>
    </div>
</template>
<script>
import { reactive, toRefs } from "@vue/reactivity";
import StateCreater from "../../state";
export default {
    setup() {
        const publicState = StateCreater();
        const allDataType = [
            { label: "请选择状态类型", value: "", default: 0 },
            { label: "数值", value: "number", default: 0 },
            { label: "字符串", value: "string", default: "" },
            { label: "日期", value: "date", default: "now" },
            { label: "数组", value: "array", default: [] },
            { label: "对象", value: "object", default: {} },
        ];
        const state = reactive({
            name: "",
            describtion: "",
            dataType: "",
            defaultValue: "",
        });
        function addState() {
            publicState.defaultState.push({
                name: "",
                describtion: "",
                dataType: "",
                defaultValue: "",
            });
        }
        function saveState() {
            publicState.defaultState.push({
                name: state.name,
                describtion: state.describtion,
                dataType: state.dataType,
                defaultValue: state.defaultValue,
            });
        }
        function delState(index) {
            publicState.defaultState.splice(index, 1);
        }
        return {
            state,
            allDataType,
            addState,
            saveState,
            delState,
            ...toRefs(publicState),
        };
    },
};
</script>
<style lang="less" src="./state.less">
</style>